<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="918" height="540"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        let img = document.createElement('img');
        img.src = '../00-assets/imgs/s11.jpg';
        img.onload = function () {
            ctx.drawImage(img, 0, 0, 918, 540);

            /*
                通过getImageData可以读取到目标区域内显示内容的每个像素点的色彩信息,保存在imgaeData.data里
                这是一个数组，其中每四个一循环，分别代表一个像素点的rgba的四个数值，我们可以通过对他们的修改达到处理图片的效果
                比如[233,233,233,255]就代表这个像素点的颜色为rgba(233,233,233,255);
            */ 
            let imageData = ctx.getImageData(0, 0, 918, 540);

            // 注意，存在imageData.data里，不要直接对imageData循环
            for (let i = 0; i < imageData.data.length; i += 4) {
                // 对于rgb每一个都取反，也就是用255减去本身，就会得到一个像x光效果的新图像
                // imageData.data[i] = 255 - imageData.data[i];
                // imageData.data[i + 1] = 255 - imageData.data[i + 1];
                // imageData.data[i + 2] = 255 - imageData.data[i + 2];
                // imageData.data[i + 3] = 255;

                // 对于每次循环到的rgb三个颜色取平均数，然后分别赋值给rgb，可以得到一个灰色处理的图像
                let avg = (imageData.data[i] +imageData.data[i+1] +imageData.data[i]+2 )/3
                imageData.data[i] = avg;
                imageData.data[i + 1] = avg;
                imageData.data[i + 2] = avg;
            }

            // 这一步很关键，我们要把处理好的图像数据通过putImageData方法重新渲染到canvas中，canvas又不是vue，你以为数据改变了视图也跟着改变啊？肯定要你自己更新的啊
            /*
                putImageData接收参数我们做个解释
                参数1：图像数据
                参数2、3：图像放到画布上的位置
                下面的参数非必须，除非你想要对自己弄好的图像数据进行裁剪
                参数4、5：裁剪图像的起始点位坐标
                参数6、7：裁剪图像从参数4、5开始计算的宽高，其实就和QQ截图一个道理
            */ 
            ctx.putImageData(imageData, 0, 0, 459, 270, 459, 270);
        }
    </script>
</body>

</html>